<template>
    <div id="qrcode">
        <div class="loginBox">
            <div class="loginText"><img src="../../assets/image/login.png" width="110" height="52" alt="">
            <p>悦途自媒体平台</p></div>
            <div class="loginMainbox">
              <div class="loginoption clearfix">
                  <div class="loginoptionl" @click="gologin()"><img src="../../assets/image/loginname.png" />密码登录 <span>|</span></div>
                  <div class="loginoptionr"><img src="../../assets/image/loginwx2.png" />微信登录</div>
              </div>
            <div class="loginMain">
                 <div class="loginMainimg">
                 	 <!-- <img src="../../assets/image/login.png"/> -->
                 	 <!-- <span id="login_container"></span> -->
                     <div class="qrcode">
                        <p class="title">微信</p>
                        <span id="login_container"></span>
                        <p class="des">请使用微登录运联传媒</p>
                        </div>
                 </div>
                 <div class="loginMainp">
                 	<p>请使用微信扫描二维码登录</p>
                 	<p>悦途自媒体平台</p>
                 </div>
                 <div class="gozc" @click="goregister">立即注册</div>

            </div>
            </div>
            <div class="loginOther"></div>
        </div>
    </div>
</template>

<script>
    import {commonService} from '../../service/commonService'
    export default {
        data() {
            return {
                
            };
        },
        mounted (){
           var obj = new WxLogin({
            id: "login_container",
            // appid: this.$store.state.appid, //测试
            appid:'wx1279fb5f622aee5d', // 正式appid
            // appid:'wxd5dd1b24ea1e7c02', //测试
            scope: "snsapi_login",
            // redirect_uri: encodeURIComponent(this.$store.state.redirect_uri),
            // redirect_uri:'http://wetuc.dtfind.com/wxlogin',  //测试
            redirect_uri:'http://welltour.cn/wxlogin?plat=front', //正式微信指向页面
            state: Math.ceil(Math.random()*1000),
            // style: "black",
            href: ""}
            ); 
               
        },
        methods: {
            gologin:function(){
                this.$router.push({path:"/login"})
            },
        	goregister:function(){
        		this.$router.push({path:"/register"})
        	},
          
        }
    }
</script>

<style lang="less">
.impowerBox .qrcode {width: 190px;border:none;margin-top:0; }
.impowerBox .title {display: none;}
.impowerBox .info {display: none;}
.impowerBox{width: 190px;margin: -8px;}
.status_icon {display:none;}
.impowerBox .status {text-align: center;} 
#qrcode{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    background:#2d3a4b url(../../assets/image/car-publisher/bg.png) center center no-repeat;
    background-size: auto 100%;
    display: flex; justify-content: center; align-items: center;

    .loginBox{
        width: 400px;
        height: 458px;
        // background: #fff;
        .loginText{
            width: 400px;
            font-size: 26px;
            font-weight: bold;
            color: #eee;
            margin:20px auto;
            text-align: center;
            p{
              font-size: 14px;
              line-height: 20px;
              margin-top: 10px;
              color: #666;
            }
        }
        .loginMainbox{
             width: 400px;
             height: 406px;
             background: #fff;
             .loginoption{
                 padding-top: 30px;
                 margin-bottom: 15px;
                 width: 400px;
                 .loginoptionl{
                     float: left;
                     width: 50%;
                     font-size: 14px;
                     line-height: 20px;
                     color: #bbb;
                     text-align: right;
                     cursor: pointer;
                     img{
                        width: 14px;
                        height: 16px;
                        margin-right: 5px;
                        margin-top: 2px;
                     }
                     span{
                         margin-left: 15px;
                     }
                 }
                 .loginoptionr{
                     float: left;
                     text-align: left;
                     width: 50%;
                     font-size: 14px;
                     line-height: 20px;
                     color: #333;
                     cursor: pointer;
                     img{
                        width: 16px;
                        height: 14px;
                        margin: 3px 5px 0 15px;
                     }
                 }
             }
        .loginMain{
        	.loginMainimg{
        		     width: 280px;
                     height: 270px;
                     margin-left: 55px;
                     overflow: hidden;
        		 img{
        		 	width: 100%;
        		 	height: 100%;
        		 }
                 .qrcode{
                       height: 280px;
                       width: 280px;
                       margin-left: -10px;
                       margin-top: -56px;
                       background: #333333;
                       text-align: center;
                  #login_container{
                    width: 190px;
                    height: 190px;
                     .impowerBox .qrcode{
                         width: 100px;
                     }
                 }
                .title{
                    display: none;
                   }
                  .des{
                     display: none;
                   }
    } 

        	}
        	.loginMainp{margin-top: 4px;p{font-size: 12px;line-height: 17px;text-align: center;color: #666;}}
        	.gozc{
        		margin-top: 6px;
        		text-align: center;
        		color: #20A0FF;
        		font-size: 12px;
        		line-height: 17px;
        		cursor: pointer;
        	}
           
        }
       }
    }
}


</style>